<template>
	<!--我的钱包-->
	<view>
		<view class="bg-img bg-white nbys">
			<view class="text-white text-center text-sm padding-top-lg">账户余额</view>
			<view class="text-white text-center">
				<text class="">￥</text>
				<text class="text-bold" style="font-size:60rpx;">{{info.balance}}</text>
			</view>
			<view class="flex text-center padding-top-lg">
				<view class="flex-sub" @tap="torecharge">
					<button class="cu-btn round line-white text-white">充值</button>
				</view>
				<!-- <view class="flex-sub">
					<button class="cu-btn round line-white text-white">退款</button>
				</view> -->
			</view>
		</view>
		<view class="operating_box" style="margin-top:-90rpx;margin-bottom:20rpx;">
			<view class="flex text-center padding-top-lg">
				<view class="flex-sub">
					<view class="text-bold">{{info.donation_amount}}</view>
					<view class="padding-top-xs">赠送金额(元)</view>
				</view>
				<view class="flex-sub">
					<view class="text-bold">{{info.frozen_amount}}</view>
					<view class="padding-top-xs">冻结金额(元)</view>
				</view>
			</view>
		</view>
		<view v-for="(info,index) in list" :key="index" class="operating_box" style="margin-bottom:20rpx;" >
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view v-if="info.pay_type==1" class="cu-avatar round lg zfbz"></view>
					<view v-if="info.pay_type==0" class="cu-avatar round lg wxys"></view>
					<view class="content">
						<view class="text-black text-xl padding-top-xs margin-top-xs">充值</view>
						<view class="text-gray text-sm">
							账户余额
						</view>
						<view class="text-gray text-sm flex padding-top-xs">
							{{info.pay_time}}
						</view>
					</view>
					<view class="action margin-right-sm">
						<view class="text-black text-lg text-bold text-xs">+{{info.recharge_amount}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let page=1,timer=null
	export default {
		data() {
			return {
				info:{
					frozen_amount:0.00,//	浮点型	冻结金额
					donation_amount:0.00,//	浮点型	赠送金额
					balance:0.00,//	浮点型	帐号余额
                },
				list:[],
				loadingTxt:'加载更多',
			}
		},
		onShow() {
			page=1;
			this.list=[];
			this.getInfo();
			this.getlist();
		},
		methods: {
			torecharge(){
				uni.navigateTo({
					url: '/pages/user/recharge/recharge?balance='+this.info.balance
				})
			},
			getInfo(){
				let that=this;
				that.http.tokenreq({
					url: 'user/v1/getwallet',
				}).then((res) => {
					let e=res.data;
					console.log("e="+JSON.stringify(e));
					if(e.code==0 && e.success){
					   that.info = e.data;
					}
				})
			},
			getlist(){
				let that=this;
				that.http.tokenreq({
					url: 'user/v1/rechargerecord',
					data:{
						'pageindex':page
					}
				}).then((res) => {
					let e=res.data;
					console.log("e="+JSON.stringify(e));
					if(e.code==0 && e.success){
					   that.list = e.rows;
					   page++;
					}
				})
			},
			getmorelist(){
				this.loadingTxt='加载中'
				let that=this;
				that.http.tokenreq({
					url: 'user/v1/rechargerecord',
					data:{
						'pageindex':page
					}
				}).then((res) => {
					uni.hideLoading();
					let e=res.data;
					if(e.code==0 && e.success){
						if(e.rows.length==0){
							that.loadingTxt="已经加载全部";
							return;
						}
						that.list=that.list.concat(e.rows);
						page++;
					}
				})
			},
			onReachBottom() {
				//阻止重复加载
				if(timer !== null){
					clearTimeout(timer)
				}
				timer=setTimeout(()=>this.getmorelist(),500)
			},
		}
	}
</script>
<style>
	uni-view {
	    font-size: 14px;
	    line-height:1.5;
	}
	.nbys{
		background-image:url(../../../common/img/beiing.png);
		width: 100%;
		height:400rpx;
	}
	.cu-btn{
		padding:0 70rpx;
	}
	.zfbz{
		background-image:url(../../../common/img/zhanghu_yue.png);
		width: 80rpx;
		height:80rpx;
	}
	.zfbys{
		background-image:url(../../../common/img/alipy.png);
		width: 80rpx;
		height:80rpx;
	}
	.wxys{
		background-image:url(../../../common/img/weixin.png);
		width: 80rpx;
		height:80rpx;
	}
	.xfys{
		background-image:url(../../../common/img/kaguanli.png);
		width: 80rpx;
		height:80rpx;
	}
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border:none;
	}
</style>
